<template>
  <div class="mobilewrap">
    <div
      class="login"
      :class="
        response_data.is_enable_no_login ? 'wlxy-loginwrap ' : 'with-account'
      "
    >
      <div class="inner">
        <div class="logo-wrap">
          <img src="@/static/images/logo-white-large.png" />
        </div>
        <h2>{{ response_data.title }}</h2>
        <div class="form-wrap">
          <div class="form-wrap-inner">
            <div class="nologin" v-if="response_data.is_enable_no_login">
              <input
                type="hidden"
                class="form-control"
                id="username"
                aria-describedby="username"
                name="username"
                autocomplete="off"
                placeholder="账号"
                :value="form_datas.username"
              />
              <input
                type="hidden"
                class="form-control"
                id="password"
                aria-describedby="password"
                name="password"
                autocomplete="off"
                placeholder="密码"
                :value="form_datas.password"
              />
              <div class="form-action">
                <input
                  type="hidden"
                  class="form-control"
                  id="is_guest"
                  aria-describedby="password"
                  name="is_guest"
                  autocomplete="off"
                  :value="form_datas.is_guest"
                />
                <a href="javascript:void(0)"  @click="handleLogin()" class="btn-img btn-submit"
                  ><img src="@/static/images/dl.png"
                /></a>
              </div>
            </div>
            <div
              class="form-horizontal"
              id="login-form"
              v-if="!response_data.is_enable_no_login"
            >
              <el-form
                :model="form_datas"
                ref="loginForm"
                class="demo-ruleForm"
              >
                <el-form-item prop="username">
                  <el-input v-model="form_datas.username" autocomplete="off">
                    <template #prepend>账号</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="number" v-model="form_datas.password">
                    <template #prepend>密码</template>
                  </el-input>
                </el-form-item>
                <el-button type="primary" :loading="loginStatus" @click="handleLogin()">登录</el-button>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login,postLogin } from "@/api/index";
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus'
import { useStore, mapGetters, mapState } from "vuex";
import { computed, onMounted, reactive, ref, toRefs } from "vue";
export default {
  name: "Login",
  // compomnts: { ElButton, ElRow },
  setup() {
    const router = useRouter()
    const store = useStore();

    let loginStatus = ref(false)
    let name = ref("test");
    let form_datas = reactive({
      username: "",
      password: "",
      is_guest: 0,
    });
    const response_data = reactive({});
    onMounted(() => {
      login().then(
        (res) => {
          let response = res.data;
          Object.assign(response_data, toRefs({ ...res.data }));
          // response_data = reactive({...res.data})
          console.log(12, response_data);
          if (response_data.is_enable_no_login) {
            form_datas.username = "guest";
            form_datas.password = "guest";
            form_datas.is_guest = 1;
          }
        },
        () => {
          console.log("error");
        }
      );
    });
    function handleLogin() {
      console.log(123)
      if (!form_datas.username || !form_datas.password) {
        ElMessage.error('请输入账号和密码');
        return false;
      }
      console.log(form_datas.username, form_datas.password)
      store.dispatch('user/loginAction', form_datas).then(response => {
        router.push('/')
      }, error => {
        ElMessage.error(error.message)
      })
      // postLogin(form_datas).then(res => {
      //   console.log(res)
      //   if (res.status == 'error') {
      //     ElMessage.error(res.message)
      //   }
      // }, () => {
      //   console.log('error')
      // })
      // console.log(form_datas.username, form_datas.password)
    }

    // let is_enable_no_login = ref()
    
    // const test = 123
    // let objec = reactive({
    //   name: '123'
    // })
    // let meeting = reactive({})
    // meeting = computed(() => store.state.meeting.meeting)
    // const meeting = useMap(["meeting"], mapState)
    // const getters = useMap(["allBooksPrice"],mapGetters);
    // const state = useMap(["Price"],mapState);

    return {
      response_data,
      form_datas,
      name,
      loginStatus,
      handleLogin,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "@/assets/less/login.less";
.login {
  background: url("@/static/images/bg_liuyou.png");
  background-position: center center;
  background-size: cover;
}

.wlxy-loginwrap .login .logo-wrap,
.login .form-wrap {
  max-width: 600px;
  background: none;
}
.wlxy-loginwrap .login .logo-wrap img {
  max-width: 600px;
}
.wlxy-loginwrap .login-title {
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin: 100px auto;
}
.wlxy-loginwrap .login-title img {
  width: 100%;
}
.wlxy-loginwrap .login .form-wrap {
  background: none;
  box-shadow: none;
  border-radius: 0px;
}
.wlxy-loginwrap .login .form-wrap-inner {
  padding: 0px;
}
.btn-img img {
  width: 300px;
}
.with-account {
  .form-wrap {
    background: #fff;
  }
}
</style>
